/*
 * 可复用的公有布局
 */
 //header菜单
.header{
    margin: 0px 20px 10px 20px;
    height: 57px;
    line-height: 57px;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #333;
    li{
        position: relative;
        text-align: center;
        flex: 1;
        a{
            color: #333;    
        }
        &.active a{
            color: #4294ff;
            font-weight: bold;
        }
        &.active::after{
            display: block;
            content: '';
            width: 60px;
            height: 3px;
            background-color: #4294ff;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -30px;
        }
    }
}
// footer部分
footer{
    height: 77px;
    flex-wrap: wrap;
    justify-content: center;
    ul{
        height: 100%;
        background-color: #fff;
        box-shadow: 0px -5px 5px #ccc;
        li{
            flex: 1;
            display: flex;
            justify-content: space-around;
            align-items: center;
            color: #8a8a8a;
            .iconfont{
                font-size: 30px;
            }
           a{
            display: block;
            color: #8a8a8a;
            &.active{
                color: #4294ff;
            }
           }
         
        }
       
    }
    
}